<template>
	<view class="search" :style="{paddingTop:capsuleTop+'px',height:capsuleHeight+'px'}">
		<view @click="returnHandle" class="return">
			<i class="iconfont icon-fanhuitubiao" :style="{color:'#666666'}"></i>
		</view>
		<view class="searchBox">
			<van-icon name="search" color="#AEAEAE" class="serchIcon" />
			<input :focus="focuComState" type="text" class="searchInput" @input="searchChangeHandel"
				:placeholder="placeholder" />
		</view>
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant/dist/dialog/dialog.js';
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [capsuleTopHeight],
		name: "return-search",
		// 接受的参数,一个是提示的文本内容,一个是类型
		props: {
			placeholder: {
				type: String,
				default: "请输入搜索内容"
			},
			focuState: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				focuComState: false
			}
		},
		mounted() {
			setTimeout(() => {
				this.focuComState = this.focuState
			}, 300)
		},
		methods: {
			searchChangeHandel(event) {
				clearTimeout(this.time)
				this.time = setTimeout(() => {
					if (event.detail.value.trim() == "" && event.detail.value.length != 0) return Dialog.alert({
						message: '请输入搜索内容',
					})
					this.$emit("searchResult", event.detail.value.trim())
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 520upx;
		display: flex;
		margin-left: 40upx;

		.return {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: 20upx;

			image {
				height: 32upx;
			}
		}

		.searchBox {
			width: 85%;
			border-radius: 999upx;
			display: flex;
			background: white;
			align-items: center;

			.serchIcon {
				margin-left: 18upx;
				margin-right: 10upx;
				font-size: 36upx;
			}

			.searchInput {
				width: 80%;
				color: #AEAEAE;
				height: 100%;
				font-size: 28upx;

			}
		}
	}
</style>
